<div class="modal fade" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Select users</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>


      <div class="modal-body p-0">
        <div class="media-list media-list-xs media-list-divided media-list-hover" data-provide="selectable">
          <a class="media media-single" href="#">
            <img class="avatar" src="../assets/img/avatar/1.jpg" alt="...">
            <span class="title">Maryam Amiri</span>
            <div class="custom-control no-border custom-control-lg custom-checkbox">
              <input type="checkbox" class="custom-control-input">
              <label class="custom-control-label"></label>
            </div>
          </a>

          <a class="media media-single" href="#">
            <img class="avatar" src="../assets/img/avatar/2.jpg" alt="...">
            <span class="title">Hossein Shams</span>
            <div class="custom-control no-border custom-control-lg custom-checkbox">
              <input type="checkbox" class="custom-control-input">
              <label class="custom-control-label"></label>
            </div>
          </a>

          <a class="media media-single" href="#">
            <img class="avatar" src="../assets/img/avatar/3.jpg" alt="...">
            <span class="title">Sarah Doner</span>
            <div class="custom-control no-border custom-control-lg custom-checkbox">
              <input type="checkbox" class="custom-control-input">
              <label class="custom-control-label"></label>
            </div>
          </a>

          <a class="media media-single" href="#">
            <img class="avatar" src="../assets/img/avatar/4.jpg" alt="...">
            <span class="title">Tim Hank</span>
            <div class="custom-control no-border custom-control-lg custom-checkbox">
              <input type="checkbox" class="custom-control-input">
              <label class="custom-control-label"></label>
            </div>
          </a>

          <a class="media media-single" href="#">
            <img class="avatar" src="../assets/img/avatar/5.jpg" alt="...">
            <span class="title">Frank Camly</span>
            <div class="custom-control no-border custom-control-lg custom-checkbox">
              <input type="checkbox" class="custom-control-input">
              <label class="custom-control-label"></label>
            </div>
          </a>

          <a class="media media-single" href="#">
            <img class="avatar" src="../assets/img/avatar/6.jpg" alt="...">
            <span class="title">John Doe</span>
            <div class="custom-control no-border custom-control-lg custom-checkbox">
              <input type="checkbox" class="custom-control-input">
              <label class="custom-control-label"></label>
            </div>
          </a>
        </div>
      </div>


      <div class="modal-footer">
        <button type="button" class="btn btn-flat btn-secondary" data-dismiss="modal" data-perform="cancel">Cancel</button>
        <button type="button" class="btn btn-flat btn-primary" data-dismiss="modal" data-perform="confirm">Add selected</button>
      </div>

    </div>
  </div>
</div>
